<route lang="json5">
{
  style: {
    navigationBarTitleText: '员工添加/编辑',
  },
}
</route>
<template>
    <wd-action-sheet v-model="show" title="规格">
        <view class="pop-box">
            <item padding="10rpx 0rpx 0" title="规格" width="130rpx" required>
                <wd-input v-model="add_data.title" clearable placeholder="输入规格名称 例:份量" />
            </item>
            <item padding="10rpx 0rpx 0" title="规格值" width="130rpx" required align="left">
                <view v-for="item, index in add_data.value"
                    style="padding-bottom:30rpx;margin-bottom:30rpx;border-bottom:dashed 2rpx #e2e2e2;">
                    <view style="display:flex;align-items:center;justify-content:space-between;">
                        <text style="color:red;">*</text>值名称：<wd-input v-model="item.title" clearable
                            style="width:420rpx;" />
                    </view>
                    <view style="display:flex;justify-content:space-between;margin:20rpx 0;">
                        <view>
                            <text style="color:red;">*</text>价格：<wd-input-number input-width="66rpx"
                                v-model="item.price" :precision="2" :min="0.1" />
                        </view>
                        <view>
                            原价：<wd-input-number input-width="66rpx" v-model="item.original_price" :precision="2"
                                :min="0" allow-null />
                        </view>
                    </view>
                    <view style="display:flex;align-items:center;justify-content:space-between;">
                        <view>
                            <text style="color:red;">*</text>库存：<wd-input-number input-width="66rpx"
                                v-model="item.stock" :precision="0" :min="1" />
                        </view>
                        <view class="spec_value add" v-if="!index" @click="add_spec_value">增加规格值</view>
                        <view class="spec_value del" v-else @click="del_spec_value(index)">删除</view>
                    </view>
                </view>
            </item>
            <view class="add_spec" @click="add_spec()">+ 生成规格</view>

            <view style="padding:20rpx;margin:0 10rpx;border-radius:12rpx;">
                <!-- 规格列表 -->
                <table class="table">
                    <tr class="tr">
                        <th>规格</th>
                        <th>规格值</th>
                        <th>价格(元)</th>
                        <th>原价(元)</th>
                        <th>库存</th>
                        <th></th>
                    </tr>
                    <template v-for="item, index in list">
                        <template v-for="item1, index1 in item.value">
                            <tr class="tr" :style="!index1 ? 'border-top:solid 15rpx white' : ''">
                                <td :rowspan="item.value.length" v-if="!index1">
                                    <wd-input v-model="item.title" placeholder="*规格" style="text-align:center;" />
                                </td>
                                <td>
                                    <wd-input v-model="item1.title" placeholder="*例:大杯" style="text-align:center;" />
                                </td>
                                <td>
                                    <wd-input v-model="item1.price" placeholder="*价格" type="number" />
                                </td>
                                <td>
                                    <wd-input-number input-width="66rpx" v-model="item1.original_price" :precision="2"
                                        :min="0" allow-null />
                                </td>
                                <td style="padding-right:-0rpx;">
                                    <wd-input v-model="item1.stock" placeholder="库存"
                                        style="width:100rpx;text-align:center;" type="number" />
                                </td>
                                <td style="position:relative;padding:0;">
                                    <wd-icon name="close" size="22px" color="#FF424E"
                                        style="position:absolute;top:8rpx;right:-20rpx;"
                                        @click="del_spec(index, index1)" />
                                </td>
                            </tr>
                        </template>
                    </template>
                </table>
            </view>

            <bottom_button title="确认" :fixed="false" class="submit" @click="send()" />
        </view>
    </wd-action-sheet>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { error } from '@/utils';
import currency from 'currency.js';
const show = defineModel('show', { default: false })
const emit = defineEmits(['change'])
const props = defineProps({
    spec_list: { type: Array as any, default: () => [] },
})
const list = ref([])
const add_data = ref({
    title: '',
    value: [
        { title: '', price: '', original_price: '', stock: '' },
    ],
})
if (props.spec_list && props.spec_list.length) {
    if (props.spec_list[0].value) {
        list.value = JSON.parse(JSON.stringify(props.spec_list))
    } else {
        let v = { title: '规格', value: [] }
        for (let i in props.spec_list) {
            if (typeof props.spec_list[i].title != 'undefined') {
                v.value.push({ title: props.spec_list[i].title, price: props.spec_list[i].price, original_price: props.spec_list[i].original_price, stock: props.spec_list[i].stock })
            }
        }
        list.value.push(JSON.parse(JSON.stringify(v)))
    }
}

function add_spec_value() {
    add_data.value.value.push({ title: '', price: '', original_price: '', stock: '' })
}
function del_spec_value(index) {
    uni.showModal({
        title: '确定删除吗？', success: function (res) {
            if (res.confirm) add_data.value.value.splice(index, 1)
        }
    });
}

function add_spec() {
    if (!error([
        [!add_data.value.title, '规格必须'],
        [!add_data.value.value || !add_data.value.value.length, '规格值必须'],
    ])) return
    for (let i in add_data.value.value) {
        if (!add_data.value.value[i].title) return uni.showToast({ title: '规格值第' + (parseInt(i) + 1) + '个名称必须', icon: 'none' });
    }
    for (let i in list.value) {
        if (add_data.value.title == list.value[i].title) return uni.showToast({ title: '规格已存在', icon: 'none' });
        for (let j in add_data.value.value) {
            for (let k in add_data.value.value) {
                if (add_data.value.value[j].title == add_data.value.value[k].title && j != k) return uni.showToast({ title: '有相同的规格值', icon: 'none' });
            }
        }
    }
    list.value.push(JSON.parse(JSON.stringify(add_data.value)))
    uni.showToast({ title: '添加成功', icon: 'none' })
    add_data.value.title = null
    add_data.value.value = [
        { title: '', price: '', original_price: '', stock: '' },
    ]
}

/*
 * 删除规格
 * 2023-11-08 18:03:38
*/
const del_spec = (i, i1) => {
    uni.showModal({
        title: '确定该条规格值吗？', success: function (res) {
            if (res.confirm) {
                if (list.value[i].value.length <= 1) list.value.splice(i, 1);
                else list.value[i].value.splice(i1, 1);
                uni.showToast({ title: '删除完成', icon: 'none' })
            }
        }
    });
}
/*
 * 添加
 * 2023-11-08 18:17:05
*/
const send = () => {
    let price = currency(0), original_price = currency(0)
    for (let i in list.value) {
        for (let n in list.value) {
            if (list.value[n].title == list.value[i].title && i != n) return uni.showToast({ title: '有相同的规格：' + list.value[i].title, icon: 'none' });
        }
        let price1 = 0, original_price1 = 0
        for (let j in list.value[i].value) {
            for (let k in list.value[i].value) {
                if (list.value[i].value[j].title == list.value[i].value[k].title && j != k) return uni.showToast({ title: list.value[i].title + '，有相同的规格值：' + list.value[i].value[j].title, icon: 'none' });
            }
            if (!parseInt(j) || price1 > list.value[i].value[j].price) {
                price1 = list.value[i].value[j].price
                original_price1 = list.value[i].value[j].original_price
            }
        }
        price = price.add(price1)
        original_price = original_price.add(original_price1)
    }
    uni.showToast({ title: "规格编辑成功", icon: "none" });
    emit("change", list.value, price.value, original_price.value)
    show.value = false
}
</script>
<style scoped lang='scss'>
.pop-box {
    height: 80vh;
    padding: 0 30rpx;
    overflow-y: scroll;
    font-size: 28rpx;
    background-color: white;
}

.add_spec {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    background: linear-gradient(to right, #FE6771, #FF424E);
    border-radius: 12rpx;
}

.spec_value {
    display: inline-block;
    width: 250rpx;
    height: 60rpx;
    margin-left: 2%;
    line-height: 60rpx;
    color: white;
    text-align: center;
    border-radius: 8rpx;
}

.spec_value.add {
    background: #34a8ff;
}

.spec_value.del {
    background: #FF424E;
}

tr:first-child {
    background: white;
}


td {
    text-align: center;
    border: solid 2rpx #e5e5e5;
}

.table {
    width: 100%;
    border-collapse: collapse;
}
</style>